<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

let charts = ref()  // 获取 组件实例

onMounted(() => {
    // 初始化echarts
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        title:{
            show:true,
            text:'今日热点',
            textStyle:{
                color:'#29fcff',
                position:{
                    left:'100px'
                }
            },
            x:'center',
            y:'center',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'center',  // 图例组件 里顶部位置，这里设置居中
            right: 30,
            orient:'vertical',  // 设置图例组件排列方式为 垂直排列
            textStyle:{
                color:'white',
                fontSize:16
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'inside',
                    color:'white'
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '军事' },
                    { value: 735, name: '新闻' },
                    { value: 580, name: '直播' },
                    { value: 484, name: '娱乐' },
                    { value: 300, name: '财经' }
                ]
            }
        ],
        // 布局配置
        grid:{left:0,right:0,top:0,bottom:0},
    })
})

</script>

<template>
    <div class="box2">
        <div class="title">
            <p>年龄比例</p>
            <img src="/public/img/screen/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style scoped lang="scss">
.box2 {
    width: 100%;
    height: 100%;
    // background-color: red;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    font-size: 20px;

    .title {
        margin-left: 20px;
    }

    .charts {
        width: 100%;
        height: 260px;
    }
}
</style>